@<template>
  <transition>
    <div class="Navigation">
      <h2 class="TheTitle">Anime</h2>
      <ul class="instructions">
        <li>
          <img :src="iconpath1" />
          <p @click="going">首页</p>
        </li>
        <li>
          <img :src="iconpath2" />
          <p @click="going1">搜索</p>
        </li>
        <li>
          <img :src="iconpath3" />
          <p @click="going2">关于我</p>
        </li>
        <li>
          <img :src="iconpath4" />
          <p @click="going3">系统设置</p>
        </li>
      </ul>
      <div class="ShrinkBar" @click="ShrinkBarclick"></div>
      <div class="scroll"></div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Navigation",
  data() {
    return {
         iconpath1:require("../assets/icon/首页_fill2.png") ,
        iconpath2:require("../assets/icon/搜索1.png") ,
       iconpath3:require("../assets/icon/关于我们1.png") ,
         iconpath4:require("../assets/icon/设置1.png") ,
         Whetherhide:true,
    }
  },
  methods: {
    going() {
      this.$router.push("/Main1");
       this.iconpath1=require("../assets/icon/首页_fill2.png")
       this.iconpath2=require("../assets/icon/搜索1.png")
      this.iconpath3=require("../assets/icon/关于我们1.png")
        this.iconpath4=require("../assets/icon/设置1.png")
  document.getElementsByClassName('scroll')[0].style="margin-top:-383px; transition: 0.3s;"
    },
    going1() {
      this.$router.push("/Search");
       this.iconpath1=require("../assets/icon/首页_fill1.png")
       this.iconpath2=require("../assets/icon/搜索2.png")
      this.iconpath3=require("../assets/icon/关于我们1.png")
        this.iconpath4=require("../assets/icon/设置1.png")
        document.getElementsByClassName('scroll')[0].style="margin-top:-325px; transition:  0.3s;"
    },
    going2() {
      this.$router.push("/AboutMe");
        this.iconpath1=require("../assets/icon/首页_fill1.png")
       this.iconpath2=require("../assets/icon/搜索1.png")
      this.iconpath3=require("../assets/icon/关于我们2.png")
        this.iconpath4=require("../assets/icon/设置1.png")
          document.getElementsByClassName('scroll')[0].style="margin-top:-263px; transition:  0.3s;"
    },
    going3() {
      this.$router.push("/SystemSettings");
         this.iconpath1=require("../assets/icon/首页_fill1.png")
       this.iconpath2=require("../assets/icon/搜索1.png")
      this.iconpath3=require("../assets/icon/关于我们1.png")
        this.iconpath4=require("../assets/icon/设置2.png")
          document.getElementsByClassName('scroll')[0].style="margin-top:-203px; transition:  0.3s;"
    },
    ShrinkBarclick(){
      if(this.Whetherhide===true){
   document.getElementsByClassName('Navigation')[0].style="margin-left:-200px; transition: 2s;"
        document.getElementsByClassName('BigBox')[0].style="margin-left:190px; transition: 2s;"
        this.Whetherhide=false
      }else{
        document.getElementsByClassName('Navigation')[0].style="margin-left:-10px; transition: 2s;"
        document.getElementsByClassName('BigBox')[0].style="margin-left:300px; transition: 2s;"
         this.Whetherhide=true
      }
     


        
    }
  },
};
</script>

<style lang='less'>
.Navigation {
  /* border: 1px solid red; */
  width: 250px;
  height: 864px;
  margin-top: 30px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  // background-color: #2f3042;
  background-color: var(--SideColor);
  margin-left: -10px;
  position: absolute;
 
}

.TheTitle {
  font-family: japan;
  /* margin: 20% 0 0 25%; */
  text-align: center;
  font-size: 40px;
  // color: aliceblue;
  color: var(--TextColor);
}

.instructions li {
  /* border:  1px solid red; */
  list-style-type: none;
  font-size: 16px;
  // color: aliceblue;
  color: var(--TextColor);
  height: 40px;
  display: flex;
  margin-top: 20px;
}

.instructions li img {
  margin-left: 10px;
  width: 25px;
  height: 25px;
}

.instructions li p {
  margin-top: 2px;
  margin-left: 20px;
  cursor: pointer;
}
.ShrinkBar {
  width: 5px;
  /* border: 1px solid red; */
  height: 130px;
  margin-left: 220px;
  border-radius: 50px;
  background-color: rgb(208, 221, 230);
  cursor: pointer;
}
.scroll {
  // border: 1px solid red;
  width: 85px;
  height: 60px;
  background-color: rgb(255, 180, 190);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  margin-top: -385px;
}
</style>